<template>
	<view class="statement">
		<view class="statement-engineer">
			维修工程师：{{engineer}}-{{phone}}
		</view>
		<view class="title">
			<text>工单信息</text>
		</view>
		<view class="card-detail">
			<view class="ful-detail">
				<view class="detail-left">
					工单号
				</view>
				<view class="detail-right">
					{{order_detail.workID}}
				</view>
			</view>
			<view class="ful-detail">
				<view class="detail-left">
					客户名称
				</view>
				<view class="detail-right">
					{{order_detail.hospital.name}}
				</view>
			</view>
			<view class="ful-detail">
				<view class="detail-left">
					设备名称
				</view>
				<view class="detail-right">
					{{order_detail.equipment.name||'暂无'}}
				</view>
			</view>
			<view class="ful-detail">
				<view class="detail-left">
					型号
				</view>
				<view class="detail-right">
					{{order_detail.equipment.marking||'暂无'}}
				</view>
			</view>
			<view class="ful-detail">
				<view class="detail-left">
					软件版本
				</view>
				<view class="detail-right">
					{{order_detail.equipment.software_version||'暂无'}}
				</view>
			</view>

			<view class="ful-detail">
				<view class="detail-left">
					客户报修时间
				</view>
				<view class="detail-right">
					{{order_detail.createtime}}
				</view>
			</view>
		</view>
		<view class="title">
			<text>客户报修内容</text>
		</view>
		<view class="enclosure">
			<view class="enclosure_tro">
				<!-- {{order_detail.describe}} -->
				<textarea v-model="content" placeholder-style="font-size: 28rpx;color: #434343;" placeholder="请输入..."
					style="width:100%"  maxlength="140"/>
			</view>
			<view class="enclosure_img" v-for="(item,index) in order_detail.multiMedia.imgs" :key="index">
				<image :src="item" mode=""></image>
			</view>
		</view>
		<view class="title">
			<text>服务信息</text>
		</view>
		<view class="card-detail">
			<view class="ful-detail" @tap="choiceType(1)">
				<view class="detail-left">
					设备合同状态
				</view>
				<view class="detail-right" style="flex:1">
					{{contract_default}}
				</view>
				<view class="arrow">

				</view>
			</view>
			<view class="ful-detail" @tap="choiceType(2)">
				<view class="detail-left">
					服务类型
				</view>
				<view class="detail-right" style="flex:1">
					{{service_default}}
				</view>
				<view class="arrow">

				</view>
			</view>
			<view class="ful-detail">
				<view class="detail-left">
					工程师到达时间
				</view>
				<view class="detail-right">
					<xp-picker @input="confirm">{{
						arrive_time
					}}</xp-picker>
				</view>
			</view>
		</view>
		<view class="title">
			<text>维修结果及建议</text>
		</view>
		<view class="proposal">
			<textarea v-model="ending" placeholder-style="font-size: 28rpx;color: #434343;" placeholder="请输入..."  maxlength="140"/>
		</view>
		<view class="submit" @tap="submit">
			提交申请接单
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				service_type: null, //服务类型:0=维修,1=保养,2=安装
				contract_status: null, //	合同状态:0=技术保合同,1=无合同,2=标准:白金合同,3=单次合同
				contract_default: '请选择',
				service_default: '请选择',
				contract_status_data: ['技术保合同', '无合同', '标准白金合同', '单次合同'],
				service_type_data: ['维修', '保养'],
				warranty_id: null, //工单id 
				service_id: null, //维修id
				order_detail: {}, //订单详情
				arrive_time: '请选择时间', //工程师到达时间
				ending: '', //维修结果及建议
				engineer: '',
				phone: '',
				content: ''
			}
		},

		onLoad(e) {
			/*  warranty_id 工单id    service_id维修id
			 */
			this.warranty_id = e.warranty_id
			this.service_id = e.service_id
			this.getDetail()
			this.getUser()
		},
		methods: {
			/* 服务信息选择  
			id
			1   设备合同选择
			2  服务类型选择
			
			*/
			choiceType(id) {
				switch (id) {
					case 1:
						uni.showActionSheet({
							itemList: this.contract_status_data,
							success: res => {
								this.contract_default = this.contract_status_data[res.tapIndex]
								this.contract_status = res.tapIndex
							},
							fail: res => {
								console.log(res.errMsg);
							}
						});
						break;
					case 2:
						uni.showActionSheet({
							itemList: this.service_type_data,
							success: res => {
								this.service_default = this.service_type_data[res.tapIndex]
								this.service_type = res.tapIndex
							},
							fail: res => {
								console.log(res.errMsg);
							}
						});
						break;
				}
			},
			/* 判断是否为视频文件 */
			judgmentFile(picUrl) {

				let filename = picUrl; //文件路径地址
				let index1 = filename.lastIndexOf(".");
				let index2 = filename.length;
				let postf = filename.substring(index1, index2); //获取文bai件后缀名duzhi
				//判断文件后缀名是否等于视频文件的后缀名
				if (postf === ".avi" || postf === ".mp4" || postf === ".rmvb") {
					return true
				} else {
					return false
				}
			},
			/* 获取工单详情 */
			getDetail() {
				this.$https.post('/warranty/details', {
					warranty_id: this.warranty_id
				}).then(res => {
					this.order_detail = res.data
					if (this.order_detail.images) { //存在照片或视频
						let images = this.order_detail.images.split(',') //字符串转数组  获取照片和视频
						this.order_detail.multiMedia = {
							imgs: [],
							video: ''
						}
						images.forEach(item3 => {
							if (this.judgmentFile(item3)) {
								this.order_detail.multiMedia.video = item3
							} else {
								this.order_detail.multiMedia.imgs.push(item3)
							}
						})
					}
				})
			},
			/* 获取当前 工程师名称 */

			getUser() {
				this.$https.post('/user/getUser').then(res => {
					this.engineer = res.data.user.nickname;
					this.phone = res.data.user.mobile
				})
			},
			/* 工程师到达时间 */
			confirm(e) {
				this.arrive_time = e
			},
			/* 提交 */
			submit() {

				if (this.arrive_time != '请选择时间') {
					this.$https.post('/warranty/statement', {
						warranty_id: this.warranty_id, //工单id
						service_id: this.service_id, //维修id	
						contract_status: this.contract_status, //	合同状态:0=技术保合同,1=无合同,2=标准:白金合同,3=单次合同
						service_type: this.service_type, //服务类型:0=维修,1=保养,2=安装
						present_time: this.arrive_time, //到场时间
						ending: this.ending, //维修结果及建议
						content: this.content //报修内容
					}).then(res => {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: res
							})
						}, 1500)
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: "请选择工程师到达时间！",
						duration: 1500
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		/* border-top: 75rpx solid #f7f8fb;
		border-bottom: 50rpx solid #f7f8fb; */
		margin: 75rpx auto 50rpx;
		width: 622rpx;
		height: 80rpx;
		background: #257EFA;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		letter-spacing: 8rpx;
		text-align: center;
	}

	.statement {
		background-color: #f7f8fb;
	}

	.statement-engineer {
		padding: 24rpx 32rpx;
		background: #FFEFE6;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF6619;
	}

	.title {
		padding: 16rpx 32rpx;
		background-color: #f7f8fb;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #888888;
	}

	.card-detail {
		background-color: #FFFFFF;

		.ful-detail {
			padding: 24rpx 32rpx;
			display: flex;
			position: relative;

			.arrow {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-right: 3rpx solid #BBBBBB;
				border-bottom: 3rpx solid #BBBBBB;
				right: 32rpx;
				transform: rotate(-45deg);
			}

			.detail-left {
				width: 200rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #888888;
			}


			.detail-right {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #434343;
			}
		}
	}

	.enclosure {
		background-color: #FFFFFF;
		padding: 22rpx 32rpx;

		.enclosure_tro {
			font-size: 24rpx;
			// font-family: PingFang SC-Medium, PingFang SC;
			// font-weight: 500;
			color: #000;
		}

		.enclosure_img {
			display: inline-block;
			border-radius: 8rpx;
			overflow: hidden;

			image {
				width: 160rpx;
				height: 160rpx;
				background: #F5F6F8;
				margin: -20rpx 10rpx 0 0;
			}
		}
	}

	.proposal {
		padding: 22rpx 32rpx;
		background-color: #FFFFFF;
		height: 200rpx;

		textarea {
			height: 100%;
			width: 100%;
		}
	}

	/* 设置input框提示内容的样式 */
	input::-webkit-input-placeholder {
		color: #434343;
	}

	/*webkit 内核浏览器*/
	input::-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 19+*/
	input:-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 4 to 18*/
	input:-ms-input-placeholder {
		color: #434343;
	}

	/* 设置textarea框提示内容的样式 */
	textarea::-webkit-input-placeholder {
		color: #434343;
	}

	/*webkit 内核浏览器*/
	textarea::-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 19+*/
	textarea:-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 4 to 18*/
	textarea:-ms-input-placeholder {
		color: #434343;
	}

	/deep/ .xp-picker-mask {
		z-index: 222;
	}
</style>
